<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="case-contact-dialog" v-if="visible">
                <div class="case-contact-dialog__mask"></div>
                <div class="case-contact-dialog__content">
                    <div class="case-contact-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close-black.svg`" />
                    </div>
                    <div class="case-contact-dialog__title">
                        联系客服获取体验资格
                    </div>
                    <div class="case-contact-dialog__tel">
                        联系电话：13611042909
                    </div>
                    <div class="case-contact-dialog__cell">
                        <input
                            v-model="phone"
                            type="text"
                            placeholder="请留下您的联系方式"
                        />
                    </div>
                    <div class="case-contact-dialog__btn" @click="onApply">
                        点击申请
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { useContent } from ".";

const { phone, visible, onClose, onApply } = useContent();

defineExpose({
    show() {
        visible.value = true;
    },
});
</script>
<style lang="scss" scoped>
.case-contact-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 300px;
        background-color: #fff;
        border-radius: 10px;
        transform: translate(-50%, -50%);
        padding: 43px 50px 0;
    }

    &__title {
        color: #333;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    &__tel {
        margin-top: 20px;
        text-align: center;
        font-size: 16px;
    }

    &__cell {
        text-align: center;
        margin-top: 20px;

        input {
            width: 300px;
            height: 50px;
            border: none;
            outline: none;
            background-color: #dddddd;
            border-radius: 10px;
            padding-left: 20px;

            &::placeholder {
                color: #999;
            }
        }
    }

    &__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        height: 50px;
        background-color: #1579bc;
        color: #fff;
        border-radius: 6px;
        margin-top: 40px;
        font-size: 20px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
    }

    &__close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
        }
    }
}
</style>
